import React from 'react';
import PropTypes from 'prop-types';
import {Card} from 'antd';
import styles from './style.css';
import Category from './Category';
import {
    getMarketDepartments,
    getDealersByCategory,
    setLocateKey,
    getMarketDepartmentsTop
} from './actions';
import {connect} from 'react-redux';
import selectorFactory from 'Shared/utils/immutableToJsSelectorFactory';

/*eslint-disable  react/prefer-stateless-function*/
class DealerTree extends React.PureComponent {
    componentDidMount() {
        this.props.init();
    }
    render() {
        return (
            <Card>
                <div className={styles.mainTree}>
                    <Category loading={this.props.loading}
                        pages={this.props.categories}
                        locatedKey={this.props.locatedKey}
                        onLoadData={this.props.onLoadData}
                        onSelect={this.props.onSelect} />
                </div>
            </Card>
        );
    }
}

/**
 * 树形结构展示Page
 */
DealerTree.propTypes = {
    init: PropTypes.func.isRequired,
    onLoadData: PropTypes.func.isRequired,
    onSelect: PropTypes.func.isRequired,
    categories: PropTypes.array,
    loading: PropTypes.bool,
    locatedKey: PropTypes.string
};


const dataSelector = selectorFactory(['page', 'domainData', 'marketDepartments', 'data']);
const mapStateToProps = state => ({
    categories: dataSelector(state),
    locatedKey: state.getIn(['page', 'appState', 'locatedKey']),
    loading: state.getIn(['page', 'domainData', 'marketDepartments', 'isFetching'])
});
const mapDispatchToProps = dispatch => ({
    init: () => dispatch(getMarketDepartmentsTop()),
    onSelect: (id, value) => {
        dispatch(setLocateKey(id));
        dispatch(getDealersByCategory(id, value.isLeaf));
    },
    onLoadData: name => dispatch(getMarketDepartments(name))
});
export default connect(mapStateToProps, mapDispatchToProps)(DealerTree);
